<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>会员管理</title>
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css">
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css">
    <script src="/app/admin/component/layui/layui.js"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <style>
        .content-body {
            position: absolute;
            left: 80px;  /* 侧边栏宽度 */
            right: 0;
            top: 60px;   /* 顶部菜单高度 */
            bottom: 0;
            padding: 15px;
            overflow: auto;
        }
        .layui-card {
            margin-bottom: 15px;
        }
        .stat-card {
            padding: 20px;
            text-align: center;
            color: #fff;
            border-radius: 2px;
        }
        .stat-card .title {
            font-size: 14px;
            margin-bottom: 10px;
        }
        .stat-card .number {
            font-size: 24px;
            font-weight: bold;
        }
        .stat-card .desc {
            font-size: 12px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<?php include base_path() . '/plugin/ky_shouyin/app/view/layout/topmenu.html'; ?>
<?php include base_path() . '/plugin/ky_shouyin/app/view/layout/front_leftmenu.html'; ?>

<div class="content-body">
    <!-- 搜索栏 -->
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="search-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">搜索</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keyword" placeholder="会员卡号/姓名/手机" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">会员等级</label>
                        <div class="layui-input-inline">
                            <select name="level" lay-search>
                                <option value="">全部等级</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="search">
                            <i class="layui-icon layui-icon-search"></i> 搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 工具栏 -->
<!--    <div class="layui-card">-->
<!--        <div class="layui-card-body">-->
<!--            <div class="layui-btn-group">-->
<!--                <button class="layui-btn" id="addMember">-->
<!--                    <i class="layui-icon layui-icon-add-1"></i> 开卡-->
<!--                </button>-->
<!--                <button class="layui-btn layui-btn-normal" id="rechargeMember">-->
<!--                    <i class="layui-icon layui-icon-rmb"></i> 充值-->
<!--                </button>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

    <!-- 会员列表 -->
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="memberTable" lay-filter="memberTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列模板 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
</script>

<!-- 会员状态模板 -->
<script type="text/html" id="statusTpl">
    {{# if(d.status === 1){ }}
    <span class="layui-badge layui-bg-green">正常</span>
    {{# }else if(d.status === 2){ }}
    <span class="layui-badge layui-bg-orange">冻结</span>
    {{# }else if(d.status === 3){ }}
    <span class="layui-badge layui-bg-gray">注销</span>
    {{# } }}
</script>

<script>
layui.use(['table', 'form', 'layer', 'jquery'], function(){
    var table = layui.table
    ,form = layui.form
    ,layer = layui.layer
    ,$ = layui.jquery;
    
    // 加载会员等级
    $.get('/app/ky_shouyin/front/member/getLevels', function(res){
        if(res.code === 0){
            var html = '<option value="">全部等级</option>';
            res.data.forEach(function(item){
                html += '<option value="' + item.id + '">' + item.name + '</option>';
            });
            $('select[name="level"]').html(html);
            form.render('select');
        }
    });
    
    // 渲染表格
    table.render({
        elem: '#memberTable'
        ,url: '/app/ky_shouyin/admin/member/list'
        ,cols: [[
            {field: 'card_no', title: '会员卡号', width: 140}
            ,{field: 'name', title: '姓名', width: 100}
            ,{field: 'phone', title: '手机号码', width: 120}
            ,{field: 'level_name', title: '会员等级', width: 100}
            ,{field: 'balance', title: '账户余额', width: 100, templet: function(d){
                    return (d.balance === null || d.balance === undefined) ? '0.00' : parseFloat(d.balance).toFixed(2);
                }}
            ,{field: 'store_name', title: '所属门店', width: 120}
            ,{field: 'status', title: '状态', width: 80, templet: '#statusTpl'}
            ,{field: 'created_at', title: '开卡时间', width: 160}
            ,{title: '操作', width: 160, align: 'center', fixed: 'right', toolbar: '#tableBar'}
        ]]
        ,page: true
        ,limit: 15
        ,limits: [15, 30, 50]
        ,text: {
            none: '暂无会员数据'
        }
    });
    
    // 监听工具条
    table.on('tool(memberTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'detail'){
            layer.open({
                type: 2
                ,title: '会员详情'
                ,content: '/app/ky_shouyin/admin/member/detail?id=' + data.id
                ,area: ['800px', '600px']
            });
        } else if(obj.event === 'recharge'){
            if(data.status != 1){
                layer.msg('只有正常状态的会员才能充值', {icon: 2});
                return;
            }
            window.location.href = '/app/ky_shouyin/admin/member/recharge?member_id=' + data.id;
        }
    });
    
    // 监听搜索
    form.on('submit(search)', function(data){
        table.reload('memberTable', {
            where: data.field
            ,page: {
                curr: 1
            }
        });
        return false;
    });
    
    // 开卡按钮事件
    $('#addMember').on('click', function(){
        window.location.href = '/app/ky_shouyin/front/member/add';
    });
    
    // 充值按钮事件
    $('#rechargeMember').on('click', function(){
        window.location.href = '/app/ky_shouyin/front/member/recharge';
    });
});
</script>
</body>
</html>